<div class="content__title">
    <h1>{{pageInfo.title}}</h1>
</div>
<nz-card>

    <div  class="container-card-list">
        <div class="container-card-content">
            <span class="content-title">{{pageInfo.availPoint}}</span>
            <span class="content-special content-font-size">{{pointInfo.availPoint}}</span>
            &nbsp;&nbsp;&nbsp;
            <span>分</span>
        </div>

        <div class="container-card-content">
            <span class="content-title">{{pageInfo.rechRuler}}</span>
            <span class="content-special">{{pointInfo.rechargeRuler}}</span>
        </div>

        <div class="container-card-content">
            <span class="content-title">{{pageInfo.rechAmount}}</span>
            <nz-input  [nzPlaceHolder]= "'请输入充值金额'" [(ngModel)]="rechargeAmount"></nz-input>
            <div *ngIf="isWarm" class="content-warm">
                请输入充值金额
            </div>
        </div>

        <div class="container-card-content">
            <span class="content-title">{{pageInfo.rechStyle}}</span>
           <button nz-button (click)="showBalan()">余额支付</button>
           <button nz-button (click)="ChatPay()">微信支付</button>
        </div>

        <div *ngIf="isBalanChosen">
            <div class="container-card-content">
                <span class="content-title">{{pageInfo.Balance}}</span>
                <span class="content-special">{{pointInfo.balance}}</span>
            </div>
        </div>


    </div>

    <div class="container-card-list-sm">
        <div nz-row class="align-sm">
            <span nz-col [nzSpan]="8" class="content-title-sm">{{pageInfo.availPoint}}</span>
            <span  nz-col [nzSpan]="10" class="content-special-sm content-font-size-sm">{{pointInfo.availPoint}}</span>
            <span nz-col [nzSpan]="6">分</span>
        </div>

        <div nz-row class="align-sm padding-top-sm">
            <span nz-col [nzSpan]="8" class="content-title-sm">{{pageInfo.rechRuler}}</span>
            <span nz-col [nzSpan]="16" class="content-special-sm">{{pointInfo.rechargeRuler}}</span>
        </div>

        <div nz-row class="padding-top-sm">
            <span nz-col [nzSpan]="24" class="content-title-sm">{{pageInfo.rechAmount}}</span>
        </div>
        <div nz-row>
            <nz-input  nz-col  [nzPlaceHolder]= "'请输入充值金额'" [(ngModel)]="rechargeAmount"></nz-input>

        </div>
        <div nz-row>
            <div nz-col  *ngIf="isWarm" class="content-warm-sm">
                请输入充值金额
            </div>
        </div>

        <div nz-row class="align-sm padding-top-sm">
            <span  nz-col [nzSpan]="8"class="content-title-sm">{{pageInfo.rechStyle}}</span>
            <button nz-col [nzSpan]="8" nz-button (click)="showBalan()">余额支付</button>
            <button  nz-col [nzSpan]="8" nz-button (click)="ChatPay()">微信支付</button>
        </div>

        <div *ngIf="isBalanChosen">
            <div class="container-card-content">
                <span class="content-title">{{pageInfo.Balance}}</span>
                <span class="content-special">{{pointInfo.balance}}</span>
            </div>
        </div>

    </div>


    <div class="content-button">
        <button nz-button (click)="commit()">确认支付</button>
    </div>
</nz-card>
